import React, { useState, Suspense } from 'react';
import { Form, Input, Button, Upload } from 'antd'
import { CloseOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom'
import './buildingAdd.scss'
import http from '../../../utils/http'
import store from '../../../store/index'
// 地图组件
const BuildingMap = React.lazy(() => import('../BuildingMap/BuildingMap'));

export const BuildingAdd = (props) => {
    // 监听浏览器 回退没有
    window.onpopstate = function (event) {
        if (event.state !== null) {
            props.setIsBuildingAdd(false)
        }
    }

    let usenavigate = useNavigate()
    // 上传图片
    const normFile = (e) => {
        console.log('Upload event:', e);
        if (Array.isArray(e)) {
            return e;
        }

        return e && e.fileList;
    };
    // 保存图片的数组
    const [fileList, setFileList] = useState([
        {
            uid: '-1',
            name: 'image.png',
            status: 'done',
            url: 'https://pics0.baidu.com/feed/3c6d55fbb2fb4316b7342cc98d010b2908f7d38e.jpeg?token=31a3ff8047bd7a0661d4def6e72036ef',
        },
    ]);

    const onChange = ({ fileList: newFileList }) => {
        setFileList(newFileList);
    };

    const onPreview = async file => {
        let src = file.url;
        if (!src) {
            src = await new Promise(resolve => {
                const reader = new FileReader();
                reader.readAsDataURL(file.originFileObj);
                reader.onload = () => resolve(reader.result);
            });
        }
        const image = new Image();
        image.src = src;
        const imgWindow = window.open(src);
        imgWindow.document.write(image.outerHTML);
    };
    // 保存
    const buildingPreservation = () => {
        const v = form.getFieldsValue(true)
        console.log('bcl', v);
        http({
            url: "/tenement/insertSpace_Ten",
            method: "post",
            params: {
                // 楼宇名称
                tenName: v.buildingName,
                // 物业费用
                tenMoney: v.buildingMoney,
                // 排序序号
                // tenId:buildingNumber,
                // 建筑面积
                tenAllarea: v.buildingNoodles,
                // 在管面积
                tenRealarea: v.buildingManage,
                // 楼宇描述
                tenDescribe: v.buildingDescribe,
                // 楼宇图片
                // ten_photo
                // 地址
                tenWhere: store.zhangxi.mapAddress,
                // 楼层层高
                tenAllnum: v.buildingHeight,
                // 地上楼层
                tenOvernum: v.buildingLandTop1,
                // 地上面积
                tenOverarea: v.buildingLandTop2,
                // 地下楼层
                tenUndernum: v.buildingLandBottom1,
                // 地下面积
                tenUnderarea: v.buildingLandBottom2,
                tenSerialint: v.bianhao
            }
        }).then((res) => {
            console.log(res);
        })
    }

    // 表单
    const [form] = Form.useForm();


    // 文本框
    const { TextArea } = Input;
    // 返回父级
    const BuildingReturn = () => {
        props.setIsBuildingAdd(false)
        usenavigate('/home/Operate/BuildingInformationManagement')
    }
    return (
        <div className='buildingAdd_box'>
            {/* 顶层样式 */}
            <div className='buildingadd_top'>
                <div className='buildingadd_kuai'>
                    <span></span>
                    <span>楼宇信息新增</span>
                </div>
                <div className='buildingadd_signout'>
                    <CloseOutlined onClick={BuildingReturn} style={{ fontSize: 20, cursor: " pointer" }} />
                </div>
            </div>

            {/* 表单 */}
            <div className='buildingbiao'>
                {/* 上 */}
                <div style={{ display: "flex" }}>
                    {/* 左边文字 */}
                    <div className='buildingAdd_biao_left'>
                        <h2>楼宇信息</h2>
                    </div>
                    {/* 右边内容 */}
                    <div className='buildingAdd_biao_right'>
                        {/* 左边表单 */}
                        <div className='buildingAdd_biao_childleft'>
                            <Form
                                name="basic"
                                labelCol={{ span: 3 }}
                                wrapperCol={{ span: 22 }}
                                initialValues={{ remember: true }}
                                autoComplete="off"
                                form={form}
                            >
                                {/* 楼宇名称 */}
                                <Form.Item
                                    label="楼宇名称"
                                    name="buildingName"
                                    rules={[{ required: true, message: '请输入楼宇名称!' }]}
                                >
                                    <Input placeholder="请输入楼宇名称" />
                                </Form.Item>

                                <Form.Item
                                    label="楼宇编号"
                                    rules={[{ required: true, message: '请输入编号!' }]}
                                    name="bianhao"
                                >
                                    <Input placeholder="请输入编号m²" />
                                </Form.Item>

                                <div style={{
                                    display: "flex"
                                }}>
                                    {/* 物业费 */}
                                    <Form.Item
                                        label="物业费用"
                                        name="buildingMoney"
                                        labelCol={{ span: 6 }}
                                        rules={[{ required: true, message: '请输入物业费用!' }]}
                                        style={{
                                            flex: '1',
                                        }}
                                    >
                                        <Input placeholder="请输入楼宇名称" />
                                    </Form.Item>

                                    {/* 排序序号 */}
                                    <Form.Item
                                        label="排序序号"
                                        name="buildingNumber"
                                        labelCol={{ span: 6 }}
                                        rules={[{ required: true, message: '请输入排序序号!' }]}
                                        style={{
                                            flex: '1',
                                        }}

                                    >
                                        <Input placeholder="请输入排序号" />
                                    </Form.Item>
                                </div>

                                <div style={{
                                    display: "flex"
                                }}>
                                    {/* 建筑面积 */}
                                    <Form.Item
                                        label="建筑面积"
                                        name="buildingNoodles"
                                        labelCol={{ span: 6 }}
                                        rules={[{ required: true, message: '请输入建筑面积!' }]}
                                        style={{
                                            flex: '1',
                                        }}
                                    >
                                        <Input placeholder="请输入建筑面积" />
                                    </Form.Item>
                                    {/* 在管面积 */}
                                    <Form.Item
                                        label="在管面积"
                                        name="buildingManage"
                                        labelCol={{ span: 6 }}
                                        rules={[{ required: true, message: '请输入在管面积!' }]}
                                        style={{
                                            flex: '1',
                                        }}
                                    >
                                        <Input placeholder="请输入在管面积" />
                                    </Form.Item>
                                </div>

                                <div style={{
                                    display: "flex"
                                }}>
                                    {/* 楼宇描述 */}
                                    <Form.Item
                                        label="楼宇描述"
                                        name="buildingDescribe"
                                        labelCol={{ span: 6 }}
                                        style={{
                                            flex: '1',
                                        }}
                                    >
                                        <TextArea rows={4} placeholder="请输入楼宇描述" />
                                    </Form.Item>
                                    {/* 在管面积 */}

                                    <Form.Item label="楼宇图片"
                                        name="buildingImage"
                                        labelCol={{ span: 6 }}
                                        rules={[{ required: true }]}
                                        style={{
                                            flex: '1',
                                        }}>
                                        <Form.Item name="dragger" valuePropName="fileList" getValueFromEvent={normFile} noStyle>
                                            <Upload
                                                action="https://pics0.baidu.com/feed/3c6d55fbb2fb4316b7342cc98d010b2908f7d38e.jpeg?token=31a3ff8047bd7a0661d4def6e72036ef"
                                                listType="picture-card"
                                                fileList={fileList}
                                                onChange={onChange}
                                                onPreview={onPreview}
                                                maxCount={1}
                                            >
                                                {fileList.length < 5 && '+ 选择图片'}
                                            </Upload>

                                        </Form.Item>
                                    </Form.Item>
                                </div>



                            </Form>
                        </div>
                        {/* 右边地图 */}
                        <div className='buildingAdd_biao_childright'>

                            <Suspense fallback={<div>Loading...</div>}>
                                <BuildingMap />
                            </Suspense>

                        </div>
                    </div>
                </div>

                {/* 下 */}
                <div style={{ display: "flex", marginTop: "25px" }}>
                    {/* 左边文字 */}
                    <div className='buildingAdd_biao_left'>
                        <h2 style={{ lineHeight: "40px" }}>楼宇信息</h2>
                    </div>
                    {/* 右边内容 */}
                    <div className='buildingAdd_biao_right' style={{ padding: "1.5% 1%" }}>
                        {/* 左边表单 */}
                        <div className='buildingAdd_biao_childleft'>
                            <Form
                                name="basic"
                                labelCol={{ span: 3 }}
                                wrapperCol={{ span: 22 }}
                                initialValues={{ remember: true }}
                                autoComplete="off"
                                form={form}
                            >
                                {/* 楼宇层高 */}
                                <Form.Item
                                    label="楼层层高"
                                    name="buildingHeight"
                                    rules={[{ required: true, message: '请输入楼层层高!' }]}
                                >
                                    <Input placeholder="请输入楼层层高" />
                                </Form.Item>

                                {/* 地上楼层 */}
                                <div style={{ display: " flex" }}>
                                    <Form.Item
                                        labelCol={{ span: 6 }}
                                        label="地上楼层"
                                        name="buildingLandTop1"
                                        rules={[{ required: true, message: '请输入层数!' }]}
                                        style={{ flex: 1, marginRight: 10 }}
                                    >
                                        <Input placeholder="请输入楼层层数" />
                                    </Form.Item>

                                    <Form.Item
                                        rules={[{ required: true, message: '请输入面积!' }]}
                                        name="buildingLandTop2"
                                        style={{ flex: 1 }}
                                    >
                                        <Input placeholder="请输入楼层面积m²" />
                                    </Form.Item>
                                    <span style={{ marginLeft: "-20px", fontSize: 16 }}>m²</span>

                                </div>

                                {/* 地下楼层 */}

                                <div style={{ display: " flex" }}>
                                    <Form.Item
                                        labelCol={{ span: 6 }}
                                        label="地下楼层"
                                        name="buildingLandBottom1"
                                        rules={[{ required: true, message: '请输入层数!' }]}
                                        style={{ flex: 1, marginRight: 10 }}
                                    >
                                        <Input placeholder="请输入楼层层数" />
                                    </Form.Item>

                                    <Form.Item
                                        rules={[{ required: true, message: '请输入面积!' }]}
                                        name="buildingLandBottom2"
                                        style={{ flex: 1 }}
                                    >
                                        <Input placeholder="请输入楼层面积m²" />
                                    </Form.Item>

                                    <span style={{ marginLeft: "-20px", fontSize: 16 }}>m²</span>

                                </div>

                            </Form>

                        </div>
                        {/* 右边地图 */}
                        <div className='buildingAdd_biao_childright'>


                        </div>
                    </div>
                </div>



                {/* 保存取消 */}

                <div className='building_button_two'>
                    <Button type="primary" onClick={buildingPreservation}>
                        保存
                    </Button>

                    <Button onClick={
                        () => {
                            props.setIsBuildingAdd(false)
                            usenavigate('/home/Operate/BuildingInformationManagement')
                        }
                    }>取消</Button>
                </div>
            </div>
        </div>
    )
}


export default BuildingAdd